<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="/static/xadmin/css/font.css">
    <link rel="stylesheet" href="/static/xadmin/css/xadmin.css">
    <link rel="stylesheet" href="/static/css/apublic.css">
    <script src="/static/xadmin/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/xadmin/js/xadmin.js"></script>
    <!--[if lt IE 9]>
    <script src="/static/xadmin/html5.min.js"></script>
    <script src="/static/xadmin/respond.min.js"></script>
    <![endif]-->
    <script src="/static/until.js" charset="utf-8"></script>
    <script src="/static/vue.js" charset="utf-8"></script>
    <script>
        if(!sessionStorage.getItem('token')) window.top.location.href='/login.html';
    </script>
    <style>
        body{
            background:#fff;
        }
        [v-cloak] {
            display: none !important;
        }
        .layui-icon-close{
            cursor:pointer;
        }
        .layui-icon-close:hover{
            color:red;
        }
        .attr>div>div:nth-child(2){
            padding-left:50px;
        }
        .attr>div>div:nth-child(3){
            padding-left:50px;
        }
        .item-attr{
            padding:3px 0px;
        }
        .item-attr-title{
            padding:0px 0px;
        }
        .item-val{
            padding:1px 0px;
        }
        .delattr,.delval,.addval{
            cursor: pointer;
            margin-left:20px;
            color:rgb(172, 169, 169);
        }
        .addval{
            margin-left:0px;
        }
        .delattr:hover,.delval:hover,.addval:hover{
            color:#009688;
        }
        .addvalinput{
            background:#fff;
            border:0px;
            font-size:16px;
            width:10px;
        }
        input{
            border-width: 1px;
            border-style: solid;
            background-color: #fff;
            border-radius: 2px;
            border-color: #e6e6e6;
            padding:3px 5px;
            width:50%;
        }
        table{
            width:100%;
            margin-top:1px;
        }
        .tb-header{
            text-align: center;
            background:#eee;
        }
        table td{
            padding:5px!important;
            border:1px solid #e6e6e6;
        }
        table input{
            width:50px!important;
        }
        .title{
            background:#eee;
            font-size:14px;
            font-weight: bold;
            padding:5px;
            display:flex;
            justify-content: space-between;
            align-items: center;
        }
        .title>span:last-child{
            cursor: pointer;
            background:#009688;
            color:#fff;
            padding:0px 5px;
        }
        .addattr{
            cursor: pointer;
            padding:5px 5px;
            display:block;
            width:100px;
            margin-top:3px;
        }
    </style>
</head>
<body>
<div v-cloak class="layui-fluid" id="app">
    <div class="layui-row">
        <div class="title"><span>属性</span><span class="layui-btn layui-btn-small" v-on:click="save()">保存</span></div>
        <div class="attr">
            <div><span v-on:click="addattr" class="layui-btn layui-btn-small addattr">添加属性</span></div>
            <div v-for="(item,index) in goods.goods_attr" class="item-attr">
                <div class="item-attr-title"><input :value="item.goods_attribute.title" v-model="item.goods_attribute.title"><span class="delattr" v-on:click="delattr(index)">删除</span></div>
                <div>
                    <div v-for="(it,ind) in item.goods_attribute.goods_attribute_value" class="item-val"><input :value="it.title" v-model="it.title" @input="changeInput()"><span class="delval" v-on:click="delval(index,ind)">删除</span></div>
                </div>
                <div class="item-attr-title"><input readonly class="addvalinput" value="+"/><span class="addval" v-on:click="addval(index)">添加</span></div>
            </div>
            
        </div>
        <div class="title"><span>规格</span><span></span></div>
        <div>
            <table>
                <tr class="tb-header">
                    <td v-for="(item,index) in goods.goods_attr">
                        {{item.goods_attribute.title}}
                    </td>
                    <td>价格</td>
                    <td>库存</td>
                </tr>
                <tr v-for="item in spec_info">
                        <td v-for="it in item.title2">{{it}}</td>
                        <td><input :value="item.price" v-model="item.price"></td>
                        <td><input :value="item.num" v-model="item.num"></td>
                </tr>
            </table>
        </div>
    </div>
</div>
<script>
    layui.use(['layer','jquery'],
        function() {
            $ = layui.jquery;
            var app = new Vue({
                el: '#app',
                data: {
                    detail_url:"/goods/detail",
                    spec_info:{},
                    goods:{},
                    loading:null
                },
                created:function(){
                    var that=this
                    this.getgoods(function(res){
                        that.goods=res
                        that.spec_info=that.resData(res.goods_attr,res.goods_spec)
                    })
                    
                    
                },
                methods:{
                    changeInput(){
                        this.spec_info=this.resData(this.goods.goods_attr,this.goods.goods_spec)
                    },
                    getgoods(cb){
                        var that=this
                        u_post(this.detail_url,{id:getQueryString("id")},function(res){
                            if(res.status.errorCode==0) {
                                cb(res.data)
                            }
                            else{
                                layer.alert(res.status.msg, {icon: 5})
                            }
                        });
                    },
                    save(){
                        var that=this
                        layer.load(); 
                        if(this.goods.goods_attr.length==0){
                            u_post("/goods/del_attr",{id:getQueryString("id")},function(res){
                                layer.closeAll('loading');
                                if(res.status.errorCode==0) {
                                }
                                else{
                                    layer.alert(res.status.msg, {icon: 5})
                                }
                            })
                            return
                        }
                        u_post("/goods/save_attr",JSON.stringify(this.goods.goods_attr),function(res){
                            if(res.status.errorCode==0){
                                that.getgoods(function(res){
                                    var s=that.spec_info
                                    var d=that.resData(res.goods_attr,[])
                                    for(i=0;i<s.length;i++){
                                        s[i].spec_code=d[i].spec_code
                                        s[i].price=Number(s[i].price)
                                        s[i].num=Number(s[i].num)
                                    }
                                    that.save_val(s)
                                }) 
                            }else{
                                layer.closeAll('loading');
                                layer.alert(res.status.msg, {icon: 5})
                            }
                        })
                    },
                    save_val(spec_data){
                        var that=this
                        u_post("/goods/save_spec",JSON.stringify(spec_data),function(res){
                            
                            layer.closeAll('loading');
                            if(res.status.errorCode==0){
                                that.getgoods(function(res){
                                    that.goods=res
                                    that.spec_info=that.resData(res.goods_attr,res.goods_spec)
                                })
                            }else{
                                layer.alert(res.status.msg, {icon: 5})
                            }
                        })
                    },
                    addattr(){
                            this.goods.goods_attr.push({
                                                        "goods_id": Number(getQueryString("id")),
                                                        "attribute_id": 0,
                                                        "goods_attribute": {
                                                            "id": 0,
                                                            "title": "",
                                                            "goods_attribute_value": [{
                                                                "id": 0,
                                                                "attribute_id": 0,
                                                                "title": ""
                                                            }]
                                                        }
                                                    });
                            this.spec_info=this.resData(this.goods.goods_attr,this.goods.goods_spec)
                    },
                    addval(index){
                        this.goods.goods_attr[index].goods_attribute.goods_attribute_value.push(
                                                                {
                                                                    "id": 0,
                                                                    "attribute_id": 0,
                                                                    "title": ""
                                                                })
                        this.spec_info=this.resData(this.goods.goods_attr,this.goods.goods_spec)
                    },
                    delattr(index){
                        
                        this.goods.goods_attr.splice(index,1)
                        //delete this.goods.goods_attr[index]
                        this.spec_info=this.resData(this.goods.goods_attr,this.goods.goods_spec)
                    },
                    delval(index,ind){
                        this.goods.goods_attr[index].goods_attribute.goods_attribute_value.splice(ind,1)
                        this.spec_info=this.resData(this.goods.goods_attr,this.goods.goods_spec)
                    },
                    resData(goods_attr,goods_spec){
                        var that=this
                        //参数判断
                        if(goods_attr.length==0) return []
                        //修正二维数组格式
                        var attr=[]
                        var attr_info=[]
                        for(i=0;i<goods_attr.length;i++){
                            var tem=[]

                            for(j=0;j<goods_attr[i].goods_attribute.goods_attribute_value.length;j++){
                                //goods_attr[i].goods_attribute.goods_attribute_value[j].attribute_id=goods_attr[i].goods_attribute.id
                                goods_attr[i].goods_attribute.goods_attribute_value[j].attribute_title=goods_attr[i].goods_attribute.title
                                tem.push(goods_attr[i].goods_attribute.goods_attribute_value[j])
                            }
                            attr.push(tem)
                        }
                        //生成一组数组
                        var list=this.doCombination(attr)
                        var spec_info=[]
                        list.forEach(function(item, index){
                            var tem={title:"",spec_code:"",price:0.00,num:0,title2:[],spec_image:[],goods_id:Number(getQueryString("id")),id:0}
                            item.forEach(function(it,ind){
                                tem.title2.push(it.title)
                                tem.title+=it.title+"/"
                                tem.spec_code+=it.id+","
                            })
                            tem.title = tem.title.substring(0, tem.title.length-1);
                            tem.spec_code = tem.spec_code.substring(0, tem.spec_code.length-1);
                            //匹配SPEC
                        
                            goods_spec.forEach(it=>{
                                if(it.spec_code==tem.spec_code){
                                    tem.price=it.price
                                    tem.num=it.num
                                    tem.title=it.title
                                    tem.spec_image=it.spec_image
                                    tem.id=it.id
                                }
                            })
                            spec_info.push(tem)
                        })
                        //this.spec_info=spec_info
                        return spec_info
                    },
                    doCombination (arr) {
                        var count = arr.length - 1; //数组长度(从0开始)
                        var tmp = [];
                        var totalArr = [];// 总数组

                        return doCombinationCallback(arr, 0);//从第一个开始
                        //js 没有静态数据，为了避免和外部数据混淆，需要使用闭包的形式
                        function doCombinationCallback(arr, curr_index) {
                            for(val of arr[curr_index]) {
                                tmp[curr_index] = val;//以curr_index为索引，加入数组
                                //当前循环下标小于数组总长度，则需要继续调用方法
                                if(curr_index < count) {
                                    doCombinationCallback(arr, curr_index + 1);//继续调用
                                }else{
                                    totalArr.push(tmp);//(直接给push进去，push进去的不是值，而是值的地址)
                                }

                                //js  对象都是 地址引用(引用关系)，每次都需要重新初始化，否则 totalArr的数据都会是最后一次的 tmp 数据；
                                oldTmp = tmp;
                                tmp = [];
                                for(index of oldTmp) {
                                    tmp.push(index);
                                }
                                }
                                return totalArr;
                        }
                    },
                }
            }) 

        })
 
    
</script>
</body>

</html>
